<template>
    <div class="box1">
        <div class="rehome" @click="reHome">
            <van-icon class="ai" size="28" name="arrow-left" />
        </div>
        <div class="re">
            <van-icon size="32" name="more" />
        </div>
        <div class="det">
            <van-swipe @change="onChange">
              <!-- <van-swipe-item><img class="swip-img" src="https://img.alicdn.com/imgextra/i4/4192593480/O1CN01y51Zsw1bZtAHlAv7U_!!0-saturn_solar.jpg_580x580q90.jpg_.webp" alt=""/></van-swipe-item>
              <van-swipe-item><img class="swip-img" src="https://img12.360buyimg.com/n7/jfs/t1/232024/28/654/88891/65377bacF40c37222/b8aa59fdc5ad4426.jpg.avif" alt=""/></van-swipe-item>
              <van-swipe-item><img class="swip-img" src="https://img12.360buyimg.com/n2/jfs/t1/180290/36/40229/136256/652faeabFfd06c2be/f2abfdfe8cbcaf94.jpg" alt=""/></van-swipe-item> -->
              <van-swipe-item v-for="(i,v) in foods.imgs" :key="v">
                <img class="swip-img" v-lazy="i" alt=""/>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/3</div>
              </template>
            </van-swipe>
        </div>
        <div class="box2">
            <div class="sees">
                <h3><span>￥</span>{{ foods.pic }}.00</h3>
                <span class="jdcs" :style="{display: foods.JD?'block':'none'}">{{ foods.JD }}</span>
                <span class="pl">{{ foods.com }}条评论</span>
            </div>
            <div class="coer">
                <span class="zy" :style="{display: foods.zy?'block':'none'}">{{ foods.zy }}</span>
                <span class="mx" :style="{display: foods.prf?'block':'none'}">{{ foods.prf }}</span>
                <p>{{ foods.title }}</p>
            </div>
        </div>
        <button class="cart" @click="show=!show">加入购物车</button>
        <van-overlay class="cover" :show="show" @click="show = false">
          <div class="wrapper" @click.stop>
            <div class="block" @click="show=!show">
                <div class="pased"><van-icon name="passed" size="50"/></div>
                <p>加入购物车</p>
            </div>
          </div>
        </van-overlay>
    </div>
</template>

<script>
    export default {
        data() {
          return {
            current: 0,
            show:false
          };
        },
        props:{
            foods:{
                type:Object,
                default:()=>{}                
            }
        },
        methods:{
            reHome(){
                this.$emit('closePop',false)
            },
            onChange(index) {
              this.current = index;
            }
        }
    }
</script>

<style lang="scss" scoped>
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    // background: rgba(255,255,255,0);
  }
  .cover{
    background: transparent;
  }

  .block {
    width: 2rem;
    height: 2rem;
    border-radius: .3rem;
    color: #fff;
    box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.5);
    .pased{
        margin-top: .2rem;
        margin-bottom: .3rem;
    }
    p{
        font-size: .3rem;
        font-family: '楷体';
    }
  }
.cart{
    position:absolute;
    top:11rem;
    right:.2rem;
    width:2rem;
    height:.7rem;
    line-height:.7rem;
    border-radius:.5rem;
    color:#fff;
    background:#f1220e;
}
.rehome{
    position:absolute;
    top:.12rem;
    left:.09rem;
    width:.58rem;
    height:.58rem;
    z-index:200;
    color:#fff;
    text-align:center;
    background:#67656a;
    border-radius:50%;
    .ai{
        margin-top: .06rem;
    }
}
.re{
    position:absolute;
    top:.12rem;
    right:.12rem;
    width:.58rem;
    height:.58rem;
    z-index:200;
}
.box1{
    width:7.5rem;
    height:20rem;
    // background:#ccc;
    position:relative;
}


.det{
    width:7.5rem;
    height:7.5rem;
    overflow:hidden;
}
.van-swipe{
    height:7.5rem;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
.swip-img{
    width:7.5rem;
    height:7.5rem;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
.box2{
    width:6.82rem;
    padding:.32rem .34rem;
    .sees{
    // height: .34rem;
    line-height: .34rem;
    margin-top: .12rem;
    overflow: hidden;
    // padding-left: .2rem;
    // background: #02ba7c;
    h3{
        float: left;
        width:6.82rem;
        height: .34rem;
        font-size: .35rem;
        margin-right: .14rem;
        color: #f03f3a;
        float: left;
        font-weight: bold;
        text-align:left;
        span{
            font-size: .16rem;
            font-weight: normal;
        }
    }
    .jdcs{
        float: left;
        // display:block;
        // display: inline-block;
        width: .9rem;
        height: .26rem;
        line-height: .26rem;
        font-size: .2rem;
        background: #02ba7c;
        color: #fff;
        border-radius: .06rem;
        margin-right: .06rem;
        margin-top: .44rem;
        margin-left: .04rem;
        // margin-left: 0;
    }
    .pl{
        float: right;
        font-size: .2rem;
        color: #99999b;
        margin-top: .44rem;
    }
}
}
.coer{
    width:6.82rem;
    margin-top:.34rem;
    // padding:.32rem .34rem;
    .zy{
        width: .5rem;
        float: left;
        font-size: .17rem;
        border-radius: .05rem;
        color: #fff;
        background: #fe4044;
        margin-right: .14rem;
    }
    .mx{
        height: .22rem;
        line-height: .22rem;
        margin-top: .04rem;
        font-size: .18rem;
        color: #c7726c;
        border: .01rem solid #c7726c; 
        float: left;
        border-radius: .06rem;
        padding: 0.02rem 0.02rem;
        overflow: hidden;
    }
    p{
        width:6.82rem;
        // display:block;
        float:left;
        padding:0;
        font-size:.35rem;
        color:#000;
        text-align:left;
        margin-top:.1rem;
    }
}
</style>